<form method="post" name="edit-form" class="edit-form" enctype="multipart/form-data">
    <div class="form-group">
        <label for="favicon">网站favicon</label>
        <div class="input-group" style="display: block;">
            <input type="file" class="form-control" name="favicon" id="favicon" hidden="">
            <img class="img" width="200" src="/uploads/20220531/09e95c3a6d4180a65015ad2052ff6114.jpg" id="img-favicon">
            <div class="input-group-append">
                <button class="btn btn-default" onclick="upload('#favicon','.img')" type="button">上传图片</button></div>
        </div>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary m-r-5">确 定</button>
    </div>
</form>
<!--End 页面主要内容-->
<script>

    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }

    function upload(elem,img)
    {
        // console.log('111')
        // 点击拉起上传选择
        $(elem).click()

        $(elem).change(function(){
            let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}

            let url = GetObjectURL(file)

            $(img).attr('src',url);

        })

    }

</script>